<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <script src="js/angular.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
    <style>
    		.mui-bar-tab1
{
    bottom: 0;

    display: table;

    width: 100%;
    height: 50px;
    padding: 0;

    table-layout: fixed;

    border-top: 0;
    border-bottom: 0;

    -webkit-touch-callout: none;
}
.mui-bar-tab1 .mui-tab-item1
{
    display: table-cell;
    overflow: hidden;

    width: 1%;
    height: 50px;

    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #929292;
}
.mui-bar-tab1 .mui-tab-item1.mui-active
{
    color: #007aff;
}
.mui-bar-tab1 .mui-tab-item1 .mui-icon
{
    top: 3px;

    width: 24px;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
}
.mui-bar-tab1 .mui-tab-item1 .mui-icon ~ .mui-tab-label
{
    font-size: 11px;

    display: block;
    overflow: hidden;

    text-overflow: ellipsis;
}
.mui-bar-tab1 .mui-tab-item1 .mui-icon:active
{
    background: none;
}
    </style>
</head>
<body>
		<header class="mui-bar mui-bar-nav">					
			<h1 class="mui-title">我的</h1>
		</header>
   <nav class="mui-bar mui-bar-tab1">
			<a class="mui-tab-item1" onclick="window.location.href='index.html'">
				<span class="mui-icon mui-icon-chatboxes"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item1">
				<span class="mui-icon mui-icon-search" onclick="window.location.href='tab.html'"></span>
				<span class="mui-tab-label">订单</span>
			</a>
			<a class="mui-tab-item1"  onclick="window.location.href='shoucang.html'">
				<span class="mui-icon mui-icon-flag"></span>
				<span class="mui-tab-label">收藏</span>
			</a>
			<a class="mui-tab-item1 mui-active" onclick="window.location.href='wode.html'">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>
			
	</nav>
		<!--<form id="addform" method="get" enctype="multipart/form-data" action="http://localhost:8080/api/api/param/complex/code/111?api_sysid=met&api_syskey=metkey">-->
			<div class="mui-content"  style="padding-bottom: 50px;">
			<img id="uploadPreview" onclick="ooxx();" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
          	<input id="fileToUpload" name="upload" type="file" name="myPhoto" onchange="fileSelected();" />
          	<div id="fileName"></div>
			<div id="fileSize"></div>
			<div id="fileType"></div>
          <hr>
          	<form enctype="multipart/form-data" method="post" name="fileinfo">
          		<img id="uploadPreview2" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
         	<input id="uploadImage2" type="file" name="myPhoto2" onchange="loadImageFile2();" />
          	</form>
          	<br />
          	<div id="output"></div>
          	<a href="javascript:sendForm()">用FormData上传二进制文件</a>
         <hr>
         	<button type="button" class="mui-btn mui-btn-success" ng-click="saveImg();">上传</button>
         	<button type="button" class="mui-btn mui-btn-success" onclick="getVal();">传值测试</button>
         	
         	<button type="button" class="mui-btn mui-btn-success" onclick="fileDemo();">H5文件API</button>
		</div>
		<!--</form>-->
		
<script type="text/javascript">

//oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
//
//oFReader.onload = function (oFREvent) {
//document.getElementById("uploadPreview").src = oFREvent.target.result;
//};
//
//function loadImageFile() {
//if (document.getElementById("uploadImage").files.length === 0) { return; }
//var oFile = document.getElementById("uploadImage").files[0];
//if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
//oFReader.readAsDataURL(oFile);
//}

oFReader2 = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader2.onload = function (oFREvent2) {
  document.getElementById("uploadPreview2").src = oFREvent2.target.result;
};

function loadImageFile2() {
  if (document.getElementById("uploadImage2").files.length === 0) { return; }
  var oFile2 = document.getElementById("uploadImage2").files[0];
  if (!rFilter.test(oFile2.type)) { alert("You must select a valid image file!"); return; }
  oFReader2.readAsDataURL(oFile2);
}

function ooxx(){
//	var width = document.getElementById("uploadPreview").offsetWidth;
//	if(width==100){
//		document.getElementById('uploadPreview').style.width = 300 + 'px';
//		document.getElementById("uploadPreview").style.height = 300 + 'px';
//	}else{
//		document.getElementById('uploadPreview').style.width = 100 + 'px';
//		document.getElementById("uploadPreview").style.height = 100 + 'px';
//	}
	document.getElementById("fileToUpload").value='';
	document.getElementById("uploadPreview").src='data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E';
	document.getElementById('fileName').innerHTML = '';
    document.getElementById('fileSize').innerHTML = '';
    document.getElementById('fileType').innerHTML = '';
}

		var app = angular.module('myApp', []);
		app.controller('personCtrl', function($scope,$http) {
    	$scope.saveImg = function() {
    		var val= document.getElementById('uploadImage').value;
    		$http({
					methode:'GET',//请求方式GET,POST
					url:'http://192.168.6.24:8080/api/api/param/complex/code/111',//请求地址
					params: {api_sysid: 'met', api_syskey: 'metkey',img: val},//参数
					data: '',//一个字符串或者对象，它会被当作请求数据发送。
					cache: true,//缓存机制
					timeout: 8000 //在请求超时之前需要等待的毫秒数。
				}).success(function(data,status,headers,config){
					$scope.phones3 = data;
				}).error(function(data,status,headers,config){
					
				});
    }
});

function getVal(){
	  var str=window.location.search;
	  alert(str);
}

// H5文件demo

oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
  document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function  fileSelected(){
	if (document.getElementById("fileToUpload").files.length === 0) { return; }
  var oFile = document.getElementById("fileToUpload").files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
  
	 var file = document.getElementById('fileToUpload').files[0];
	 if (file) {
    	var fileSize = 0;
    	if (file.size > 1024 * 1024)
    	fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
    else
    	fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
    	document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
    	document.getElementById('fileSize').innerHTML = 'Size: ' + file.Size;
    	document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
  }
}


//H5 File API Demo
function fileDemo(){
	var upfile = document.getElementById('fileToUpload');
	alert(upfile.files);
}

//FormData
function sendForm() {
	var oOutput = document.getElementById("output");
	var oData = new FormData(document.forms.namedItem("fileinfo"));
	var oReq = new XMLHttpRequest();


    oReq.onSuccess = function __success(evt){

        console.log("onSuccess");
    }

    oReq.onException = function __exception(evt){

        console.log("onException");
    }
//  oReq.onreadystatechange = function onerrorfunc(err,aa,bb,cc){
//    // 全局handle error
//    // 可覆盖
//    console.log("onerror");
//  };

	oReq.open("post", "http://localhost:8082/app/ajax/list", true);
    oReq.setRequestHeader("X-Requested-With","XMLHttpRequest");
  	oReq.onload = function(oEvent) {
    if (oReq.status == 200) {

        oReq.onSuccess(oEvent.target.responseText);
      oOutput.innerHTML = "上传成功!";
    } else {
        oReq.onException(oEvent);
      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
    }
  };
  oReq.send(oData);
}
</script>
</body>
</html>
